var selectChildItemPossibleID;
var selectChildItemSelectedID;
var selectParentItemPossibleID;
var selectParentItemSelectedID;

function GetCascadeTreeView(treeviewDivId, childListname, parentLookupFieldName, childLookupFieldName, childListRefColNm, parentListName, parentListRefColNm, isDisplayMode) {

	selectChildItemPossibleID = childLookupFieldName + " possible values";
	selectChildItemSelectedID = childLookupFieldName + " selected values";
	selectParentItemPossibleID = parentLookupFieldName + " possible values";
	selectParentItemSelectedID = parentLookupFieldName + " selected values";

	var listname = "States/Provinces";
	$.ajax({
		url : _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + childListname + "')/items?$select="+childListRefColNm+","+parentListName+"/"+parentListRefColNm+"&$expand="+parentListName+"/"+parentListRefColNm+"&$Orderby="+parentListName+"/"+parentListRefColNm+"",
		method : "GET",
		headers : {
			"Accept" : "application/json; odata=verbose"
		},
		success : function (data) {
			// Returning the results

			$("#" + treeviewDivId).append("<ul></ul>");
			for (i = 0; i < data.d.results.length; i++) {
				var checked = "";
				if (!$("#" + treeviewDivId + " > ul > li[id='li" + data.d.results[i].CountryRef.Title + "']").length) {
					if ($("select[title='" + selectParentItemSelectedID + "'] >option[title='" + data.d.results[i].CountryRef.Title + "']").length)
						checked = "checked";
					var topchkBox = "<input type='checkbox' onclick='parentItemChecked(this)' " + checked + " id=" + data.d.results[i].CountryRef.Title + " value='" + data.d.results[i].CountryRef.Title + "'>";
					if(isDisplayMode == false)
						$("#" + treeviewDivId + " > ul").append("<li id='li" + data.d.results[i].CountryRef.Title + "' style='list-style:none;'>"+topchkBox  + data.d.results[i].CountryRef.Title + "</li>")
					else
						$("#" + treeviewDivId + " > ul").append("<li id='li" + data.d.results[i].CountryRef.Title + "' style='list-style:none;'>"+ data.d.results[i].CountryRef.Title + "</li>")
				}
				checked = "";
				if ($("select[title='" + selectChildItemSelectedID + "'] >option[title='" + data.d.results[i].Title + "']").length)
					checked = "checked";
				var childChkBox = "<input type='checkbox' " + checked + " onclick='childItemChecked(this)' value='" + data.d.results[i].Title + "'>";
				if(isDisplayMode == false)
					$("#" + treeviewDivId + " > ul > li[id='li" + data.d.results[i].CountryRef.Title + "']").append("<ul id='ul" + data.d.results[i].Title + "'>"+childChkBox  + data.d.results[i].Title + "</ul>");
				else
					$("#" + treeviewDivId + " > ul > li[id='li" + data.d.results[i].CountryRef.Title + "']").append("<ul id='ul" + data.d.results[i].Title + "'>"+ data.d.results[i].Title + "</ul>");
			}
		},
		error : function (data) {
			console.log(JSON.stringify(data));
		}
	});

}
function childItemChecked(element) {

	if ($(element).prop("checked") == true) {
		addToSelectedOptions(selectChildItemPossibleID, $(element).val());
		if ($(element).parent().parent().find(">:first-child").prop("checked") == false) {
			$(element).parent().parent().find(">:first-child").prop("checked", true)
			addToSelectedOptions(selectParentItemPossibleID, $(element).parent().parent().find(">:first-child").val());

		}
	} else if ($(element).prop("checked") == false) {
		removefromSelectedoptions(selectChildItemSelectedID, $(element).val());

		if ($(element).parent().parent().find("ul > input[type]:checked").length == 0) {
			$(element).parent().parent().find(">:first-child").prop("checked", false)
			removefromSelectedoptions(selectParentItemSelectedID, $(element).parent().parent().find(">:first-child").val());
		}
	}
}
function parentItemChecked(element) {
	if ($(element).prop("checked") == true) {
		addToSelectedOptions(selectParentItemPossibleID, $(element).val());
		$(element).parent().find("ul > input").each(function (idx) {

			addToSelectedOptions(selectChildItemPossibleID, $(this).val());

			$(this).prop("checked", true);

		});
	} else if ($(element).prop("checked") == false) {
		removefromSelectedoptions(selectParentItemSelectedID, $(element).val());

		$(element).parent().find("ul > input").each(function (idx) {
			$(this).prop("checked", false);
			removefromSelectedoptions(selectChildItemSelectedID, $(this).val());
		});

	}
}
function addToSelectedOptions(elementId, value) {
	$("select[title='" + elementId + "'] > option:selected").each(function (idx) {
		$(this).prop("selected", false)
	})
	$("select[title='" + elementId + "'] > option[title='" + value + "']").each(
		function (index) {
		$(this).prop("selected", true)
	});
	$("select[title='" + elementId + "']").parent().parent().find("button:contains('Add >')").click();
}
function removefromSelectedoptions(elementId, value) {
	$("select[title='" + elementId + "'] > option:selected").each(function (idx) {
		$(this).prop("selected", false)
	})
	$("select[title='" + elementId + "'] > option[title='" + value + "']").each(
		function (index) {
		$(this).prop("selected", true)
	});
	$("select[title='" + elementId + "']").parent().parent().find("button:contains('< Remove')").click();

}
